<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view style="min-height: 100vh"> -->
	 <view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	 
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="container">
			<image class="title-img" src="/static/user/share-title.png" mode="aspectFit"></image>
			<!-- <view class="title">
				邀请注册，即有机会参与抽奖赢“豪”礼
			</view> -->
			<view class="code-item">
				<image class="code-img" src="/static/user/share-bg.png" mode="scaleToFill"></image>
				<view class="code-box">
					<view class="m-t-40 color-631601 fsz36 font-blod">
						您的专属邀请码为
					</view>

					<view class="code-text">
						<view class="code-text-item">
							{{codeList.code}}
						</view>

					</view>
					<view class="line"></view>
					<view class="">
						<image class="code-imgg" :src="codeList.url" mode="aspectFit"></image>
					</view>
					<view class="code_btn cell-item-cc" @click="save">
						下载二维码
					</view>
				</view>


			</view>
			<view class="invite-list">
				<view class="invite-title ">
					<view class="cell-item-cc">
						<image class="in-img" src="/static/user/affle2.png" mode="aspectFit"></image>
						<view class="color-631601 fsz32 font-blod m-row-10">
							邀请记录
						</view>
						<image class="in-img" src="/static/user/affle2.png" mode="aspectFit"></image>
					</view>
					<view class=" fsz24 m-t-10" style="color: #D78E65;">
						已邀请{{codeList.num||0}}人
					</view>
					<view class="cell-item-cb m-t-20">
						<view class="m-r-30">
							实名 {{codeList.real_num}}
						</view>
						<view class="m-l-20">
							购买{{codeList.buy_num}}
						</view>
					</view>
				</view>
				<view class="invite-box ">
					<view class="box-item cell-item-cb color-631601">
						<view class="box" style="width: 20%;">
							编号
						</view>
						<view class="box" style="width: 50%;">
							用户手机
						</view>
						<view class="box" style="width: 30%;">
							邀请结果
						</view>
					</view>
					<view class="box-item cell-item-cb color-D78E65" v-for="(item,index) in list" :key="index">
						<view class="box" style="width: 20%;">
							#{{item.id}}
						</view>
						<view class="box" style="width: 50%;">
							{{item.mobile}}
						</view>
						<view class="box" style="width: 30%;">
							<text style="color: #59B236;" v-if="item.real_status==1">邀请成功</text>
							<text v-else class="color-D78E65">待邀请成功</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		h5Url
	} from '@/config/config.js'
	export default {
		data() {
			return {
				codeList: {},
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: false
			}
		},
		onShow() {
			this.get_share()
			this.get_getMyInviteList()
		},
		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1;
				let data = {
					page: new_page,
					limit: this.limit
				}
				this.$api.getMyInviteList(data, res => {
					if (res.status) {
						this.list = this.list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
						this.page = new_page
					}
				})
			}
		},
		methods: {
			save: function() {

				// #ifdef H5
				this.downloadIamge(this.codeList.url, 'image');
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				this.downloadImageOfMp(this.codeList.url)
				// #endif

			},
			get_getMyInviteList() {
				this.$api.getMyInviteList({
					page: this.page,
					limit: this.limit
				}, res => {
					this.list = res.data
					this.hasNextPage = res.data.length >= this.limit
				})
			},
			get_share() {
				let data = {
					page: '1',
					type: '2',
					client: '1',
					url: h5Url + 'pages/login/register'
				}
				let userToken = this.$db.get('userToken')
				if (userToken) {
					data.token = userToken
				}
				this.$api.share(data, res => {
					// if (res.status) {
					this.codeList = res.data

					console.log(this.codeImg, "code-imgg", res.data.url)
					// }
				})
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;

			},
			downloadImageOfMp(image) {
				let _this = this

				// 先下载到本地
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: image,
							success() {
								_this.$common.successToShow('保存成功')

							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx 71rpx;
		padding-top: 200rpx;

		.invite-list {
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding: 35rpx 27rpx 55rpx 27rpx;
			background-color: #f8ebdb;
			width: 100%;

			.invite-box {
				padding: 0 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 30rpx;

				.box-item:nth-child(1) {
					border-bottom: 1rpx dashed #D13834;
				}

				.box-item {
					width: 100%;
					height: 89rpx;
					border-bottom: 1rpx solid #E5C4AD;
					text-align: center;
					font-size: 26 rpx;


				}
			}

			.invite-title {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.in-img {
					width: 18rpx;
					height: 13rpx;
				}
			}
		}

		.code-item {
			width: 100%;
			margin-top: 372rpx;
			height: 906rpx;
			position: relative;

			.code_btn {
				margin-top: 70rpx;
				border-radius: 20rpx;
				width: 488rpx;
				height: 80rpx;
				background: $btn-bgg;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
			}

			.code-imgg {
				margin-top: 44rpx;
				width: 366rpx;
				height: 366rpx;
				border-radius: 30rpx;
			}

			.code-box {
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 100%;
				padding: 30rpx 60rpx;

				.line {
					width: 100%;
					height: 1rpx;
					border-bottom: 1rpx dashed #f97d2d;
				}

				.code-text {
					background: #f9b379;
					width: 320rpx;
					min-height: 70rpx;
					padding: 10rpx;
					border-radius: 50rpx;
					display: block;
					margin: 30rpx auto;

					.code-text-item {
						background: linear-gradient(180deg, #f97d2d 0%, #f65318 100%);
						height: 100%;
						width: 100%;
						border-radius: 50rpx;
						box-shadow: inset 0px 0px 10px 10rpx rgba(249, 125, 49, 0.3);
						padding: 10rpx;
						color: #fff;
						text-align: center;
						font-size: 37rpx;
					}

				}
			}

			.code-img {
				width: 100%;
				height: 906rpx;
				position: absolute;
				top: 0;
				left: 0;

			}
		}

		.title-img {
			display: block;
			margin: 0 auto;
			width: 534rpx;
			height: 139rpx;
		}
	}
</style>